import { AMapScene, LoadImage, PointLayer ,LayerEvent, Popup} from '@antv/l7-react';
import * as React from 'react';
import ReactDOM from 'react-dom';
//antd
import {
    Button, Drawer, Modal,Switch,Divider,
    Popover, Table, Menu, Layout, Input, Statistic, Row, Col
} from 'antd';
import {
    AppstoreOutlined,
    BarChartOutlined,
    VideoCameraOutlined,
    SmileOutlined,
    RocketTwoTone,
    LineChartOutlined,
    PieChartOutlined,
    SendOutlined,
    NodeExpandOutlined
} from '@ant-design/icons';

//image
import airport1 from './img/airport1.svg'
import airport2 from './img/airport2.svg';
import airport3 from './img/airport3.svg';
import airport4 from './img/airport4.svg';
import airport5 from './img/airport5.svg';
//models
import dateFlightNumModel from "./models/dateFlightNumModel";
import cityThroughModel   from "./models/cityThroughModel";
import delayTimeModel     from "./models/delayTimeModel";
import flighValidModel    from "./models/flighValidModel";
import destinationModel   from "./models/destinationModel";
import firmInfoModel      from "./models/firmInfoModel";

import {render} from "@testing-library/react";


const Flight = React.memo(function Map(props) {
    const { Search } = Input;
    const { Header, Content, Footer, Sider } = Layout;
    //所有机场信息
    const [data, setData]                             = React.useState();
    //航班吞吐量
    const [throughput, setThroughput]                 = React.useState();
    //每一个航班的详细信息
    const [popupInfo, setPopupInfo]                   = React.useState();
    const [detailData, setDetailData]                 = React.useState();
    const [drawVisible, setDrawVisible]               = React.useState(false);
    const [menuVisible, setMenuVisible]               = React.useState(false);
    const [isModalVisible, setIsModalVisible]         = React.useState(false);
    //IATACode对应的城市的信息
    const [iaTaCodeCityInfo, setIATACodeCityInfo]     = React.useState();
    const onClose = () => {
        setDrawVisible(false);
    };
    const { SubMenu } = Menu;
    //menuClickd点击
    const menuClick = (e) => {
        switch (e.key){
            case '1.1':
                console.log("分页查询时间段内各城市航班吞吐量");
                props.history.push('/Flow_all');
                break;
            case '1.2':
                console.log("分页查询时间段内各城市航班吞吐量");
                props.history.push('/Flow_ciyun');
                break;
            case '1.3':
                console.log("分页查询时间段内各城市航班吞吐量");
                props.history.push('/First_out');
                break;
            case  '2':
                console.log("查询各航空公司平均晚点时长，晚点率");
                props.history.push('/Delay');
                break;
            case  '3.1':
                console.log("分页查询航班的有效信息");
                props.history.push('/Detail');
                break;
            case '5.1':
                console.log("Top10公司信息");
                props.history.push('/TopFlight_c');
                break;
            case '5.2':
                console.log("Top10机型信息");
                props.history.push('/TopFlight_f');
                break;
            case '6':
                console.log("每日航班数统计");
                props.history.push('/Sum');
                break;
            case '7':
                console.log("每日航班数统计");
                props.history.push('/Age');
                break;
        }
    }
    // function onSearch(e) {
    //     if(e){
    //         setIsModalVisible(true);
    //         getFlighInfoByICAOCode(e);
    //     }
    // }
    //鼠标点击
    function handleClick(e){
        setDrawVisible(true);
        setDetailData(e.feature);
    }
    // 鼠标移入
    function mouseenter(e) {
        setPopupInfo(e);
        console.log(popupInfo);
    }
    // 鼠标移出
    function mouseout(e) {
        setPopupInfo(undefined);
        console.log(popupInfo);
    }
    //根据机场的ICAOCode查找机场信息
    let getFlighInfoByICAOCode = async (cityName) => {
        const response = await fetch(
            'http://flightapi.xiexianbo.xin/airPort/getICAOInfor?ICAOCode='+cityName,
            {
                method:'GET',
            }
        );
        const data = await response.json();
        console.log(data);
        console.log(data.data.data[0]);
        setIATACodeCityInfo(data.data.data[0]);
    }
    React.useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/airPort/listAll',
            );
            const data  = await response.json();
            const data1 = await data.data.data;
            setData(data1);
        };
        fetchData();
    }, []);
    const modelOKClick = () => {
        setIsModalVisible(false);
    };
    const modalCancelClick = () => {
        setIsModalVisible(false);
    };
    //UI
    return (
        <>
            <Header className='top'>国内航班信息展示系统</Header>
            <Layout>
                <Sider
                    style={{
                        overflow: 'auto',
                        height: '100vh',
                        // width:'50vh',
                        position: 'fixed',
                        left:0,
                    }}
                >
                    <Menu theme="light" style={{ width: 200 }}
                          defaultSelectedKeys={['1']} mode="inline"  onClick={menuClick}>
                        <SubMenu className='list' key="sub1" icon={<SmileOutlined />} title="航班吞吐量">
                            <Menu.Item key="1.1" icon={<LineChartOutlined />}>进出人流量</Menu.Item>
                            <Menu.Item key="1.2" icon={<BarChartOutlined />}>总人流量词云</Menu.Item>
                        </SubMenu>
                        <Menu.Item className='list' key="2" icon={<PieChartOutlined /> }>
                            航班晚点情况
                        </Menu.Item>
                        <SubMenu className='list' key="sub2" icon={<RocketTwoTone />} title="航班信息查询">
                            <Menu.Item key="3.1" icon={<SendOutlined />}>航班详细信息</Menu.Item>
                            <Menu.Item key="3.2" icon={<NodeExpandOutlined />}>始发机场查询</Menu.Item>
                            <Menu.Item key="3.3" icon={<NodeExpandOutlined />}>目的机场查询</Menu.Item>
                        </SubMenu>
                        <SubMenu className='list' key="sub3" icon={<SmileOutlined />} title="Top10信息">
                            <Menu.Item key="5.1" icon={<BarChartOutlined />}>Top10公司</Menu.Item>
                            <Menu.Item key="5.2" icon={<BarChartOutlined />}>Top10机型</Menu.Item>
                        </SubMenu>
                        <Menu.Item className='list' key="6" icon={<AppstoreOutlined />}>
                            每日航班数目
                        </Menu.Item>
                        <Menu.Item className='list' key="7" icon={<AppstoreOutlined />}>
                            飞机服务时长
                        </Menu.Item>
                        <Search  placeholder="按IATA搜索机场"/>
                        <Search  placeholder="按城市搜索机场"/>
                        <Search  placeholder="按ICAO搜索机场"/>
                    </Menu>
                </Sider>
                <Layout>
                    {/*<Header className='top'>航班系统</Header>*/}
                    <Content style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                    >
                        <AMapScene
                            map={{
                                center: [116.6, 40.0773],
                                pitch: 0,
                                style: 'light',
                                zoom: 6,
                            }}
                            style={{
                                position: 'absolute',
                                top:70,
                                left: 200,
                                right: 0,
                                bottom: 0,
                            }}
                        >
                            <LoadImage name="01" url={airport1}/>
                            <LoadImage name="02" url={airport2}/>
                            <LoadImage name="03" url={airport3}/>
                            <LoadImage name="04" url={airport4}/>
                            <LoadImage name="05" url={airport5}/>
                            {data && (
                                <PointLayer
                                    key={'2'}
                                    options={{
                                        autoFit: true,
                                    }}

                                    source={{
                                        data: data,
                                        // @ts-ignore
                                        parser: {
                                            type: 'json',
                                            x: 'longitude',
                                            y: 'latitude',
                                        }
                                    }}
                                    shape={{
                                        field: 'flightNumber',
                                        values:(flightNumber)=>{
                                            if(flightNumber > 2000){
                                                return '04';
                                            }else if(flightNumber > 1000 && flightNumber < 2000){
                                                return '05';
                                            }else if(flightNumber > 100 && flightNumber < 1000){
                                                return '03';
                                            }else if(flightNumber > 50 && flightNumber < 100){
                                                return '01';
                                            }else{
                                                return '02';
                                            }
                                        }
                                    }}
                                    size={{
                                        values: 10,
                                    }}
                                    style={{
                                        opacity: 1,
                                    }}
                                >
                                    <LayerEvent type="click" handler={handleClick} />
                                    <LayerEvent type="mouseenter" handler={mouseenter} />
                                    <LayerEvent type="mouseout" handler={mouseout} />
                                </PointLayer>
                            )}
                            {popupInfo && (
                                <Popup
                                    key="popup"
                                    // @ts-ignore
                                    lnglat={popupInfo.lngLat}
                                    option={{ closeButton: false, offsets: [0, 10] }}
                                >
                                    {"机场信息 "}
                                    <ul
                                        style={{
                                            margin: 0,
                                        }}
                                    >
                                        <li>IATACode:{popupInfo.feature.IATACode}</li>
                                        <li>aptCcity:{popupInfo.feature.aptCcity}</li>
                                        <li>aptCname:{popupInfo.feature.aptCname}</li>
                                    </ul>
                                </Popup>
                            )}
                            <Drawer
                                width={400}
                                title="航班信息"
                                placement="right"
                                closable={false}
                                onClose={onClose}
                                visible={drawVisible}
                            >
                                {detailData && <ul
                                    style={{
                                        // listStyle:"none",
                                        margin: 0,
                                    }}
                                >
                                    <li>IATACode:{detailData.IATACode}</li>
                                    <li>aptCcity:{detailData.aptCcity}</li>
                                    <li>aptCname:{detailData.aptCname}</li>
                                </ul>}
                            </Drawer>
                        </AMapScene>
                    </Content>
                </Layout>
            </Layout>

        </>
    );
});

export default Flight;
